<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style type="text/css">
    *{margin: 0;padding: 0;}
    html,body{height:100%;}
    .wrap{
      width:200px;height:200px;
      border:1px solid red;
      margin:20px auto;
      /*变形元素父标签上设置*/
      transform-style: preserve-3d;
      perspective:2000px;/*景深  800-2000*/
    }
    .item{
      width:100%;height:100%;
      background:red;
      transition:1s;
    }
    .item:hover{
      /*3d新增函数*/
      transform:rotateY(45deg);
      /* transform:rotateX(-45deg); */
      /* transform:rotateZ(45deg); */

      /* transform:translateZ(400px);变大 */
      /* transform:translateZ(-100px);变小 */

      /* transform: scaleZ(10) rotateY(45deg); 必须搭配其他才有效果*/
      /* transform: scale3d(1,1,10) rotateY(45deg);三个值都设置 */
    }

    /*旋转正方体*/
    .wrap1{perspective:2000px;}
    .wrap1 ul{
      width:200px;height:200px;
      margin:100px auto;
      position: relative;
      transform-style:preserve-3d;
      animation:move 5s infinite linear both;
      transform-origin:100px 100px -100px;/*转动坐标，正方体中心点*/
    }
    .wrap1 ul li {
      width:196px;height:196px;line-height: 196px;
      border:2px solid #000;
      background:rgba(152,251,152,0.5);
      font-size:60px;color:#fff;
      list-style:none;text-align: center;
      position:absolute;top:0;left:0;
    }
    .wrap1 ul li:nth-child(1){
      top:-200px;
      transform:rotateX(90deg);
      transform-origin:bottom;
    }
    .wrap1 ul li:nth-child(2){
      top:200px;
      transform:rotateX(-90deg);
      transform-origin:top;
    }
    .wrap1 ul li:nth-child(3){
      left:-200px;
      transform:rotateY(-90deg);
      transform-origin: right;
    }
    .wrap1 ul li:nth-child(4){
      left:200px;
      transform: rotateY(90deg);
      transform-origin:left;
    }
    .wrap1 ul li:nth-child(5){
      transform:translateZ(-200px);
    }
    .wrap1 ul li:nth-child(6){
      transform:translateZ(0px);
    }
    @keyframes move {
      0%{
        transform: rotateX(0deg) rotateY(0deg);
      }
      100%{
        transform: rotateX(360deg) rotateY(360deg);
      }
    }

    /*翻转广告*/
    .wrap2{
      width:310px;height:100px;
      margin:100px auto;
      perspective:2000px;
    }
    .item2{
      width:100%;height:100%;
      position:relative;
      transform-style:preserve-3d;
      transition:1s;
    }
    .item2 img{
      width:100%;height:100%;
      position:absolute;
      border-radius: 5px;
      transform:translateZ(50px);/*图片Z轴向前移动50像素*/
    }
    .item2 span{
      width:290px;height:80px;
      padding:10px;
      position: absolute;
      left:0;top:0;
      background:#ccc;
      border-radius:5px;
      transform:rotateX(-90deg) translateZ(50px);
    }
    .item2:hover{
      transform:rotateX(90deg);
    }

    .wrap3{
      width:100px;height:360px;
      margin:100px auto;
      perspective:2000px;
    }
    .item3{
      width:100%;height:100%;
      position:relative;
      transform-style:preserve-3d;
      transition:1s;
    }
    .item3 img{
      width:100%;height:100%;
      position:absolute;
      border-radius: 5px;
      transform:translateZ(50px);/*图片Z轴向前移动50像素*/
    }
    .item3 span{
      width:80px;height:340px;
      padding:10px;
      position: absolute;
      left:0;top:0;
      background:#ccc;
      border-radius:5px;
      transform:rotateY(90deg) translateZ(50px);
      writing-mode:vertical-lr;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .item3:hover{
      transform:rotateY(-90deg);
    }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="item"></div>
  </div>

  <div class="wrap1">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
    </ul>
  </div>

  <div class="wrap2">
    <div class="item2">
      <img src="less/images/3.jpg" alt="">
      <span> Contact Form <br>The easiest way to add a contact form to your shop.</span>
    </div>
  </div>

  <div class="wrap3">
    <div class="item3">
      <img src="less/images/4.jpg" alt="">
      <span>梦开始的地方</span>
    </div>
  </div>
</body>
</html>